<template>
  <div>
    <h1>第四题</h1>
    <div>
      <span>欢迎光临vue开发的收银系统水果店</span>
      <p>苹果{{ jg }}元一斤，折扣《8折》</p>
      <p>请输入你要购买的斤数：<input type="text" v-model.number="val" /></p>
      <button @click.prevent="jz">结账买单</button>
      <p>结账单:总价：{{ count }} 元 折后价：{{ zhj }}元 省了：{{ sq }}元</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      jg: 10,
      zhj: 0,
      sq: 0,
      val: 0,
    }
  },
  methods: {
    jz() {
      this.count = this.jg * this.val
      this.zhj = this.count * 0.8
      this.sq = this.count - this.zhj
    },
  },
}
</script>

<style></style>
